import { Device } from "@/api/interface/iot";
import { licenseVersion, licenseVersionAdd, licenseVersionDel, licenseVersionModify } from "@/api/modules/system/license";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { licenseStatusType } from "@/enums/dictEnum";
import "./index.scss";
import DialogBox from "@/components/DialogBox";
import JsonEditerVue from "@/components/JsonForm/JsonEditer.vue";
import { showTips, confirm, showMsg } from "@/utils/util";
import { MessageType } from "@/enums/messageEnum";
export default defineComponent({
	setup() {
		const initParam = reactive<Device.ReqProduct>({ pageIndex: 1, pageSize: 20 });
		const proTable = ref<any>();

		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};

		const getTableList = async (params: any) => {
			return licenseVersion(params);
		};
		const btnList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			btnList.value = await useAuthButtons();
		});
		const detailDialog = reactive<any>({
			title: "",
			detail: "",
			version: "",
			visible: false,
			id: ""
		});
		const clickBtn = async (fn: string, row: any) => {
			switch (fn) {
				case "detail":
					detailDialog.detail = JSON.stringify(row.license);
					detailDialog.visible = true;
					detailDialog.title = "授权信息";
					break;
				case "del":
					confirm({ content: "是否删除该数据！" }).then(async (flag: any) => {
						if (!flag) {
							return;
						}
						let { code, message } = await licenseVersionDel({ id: row.id });
						let ok = showTips(code, "删除版本", message);
						if (ok) {
							proTable.value.reset();
						}
					});
					break;
				case "add":
					detailDialog.version = "";
					detailDialog.detail = JSON.stringify({});
					detailDialog.title = "添加版本";
					detailDialog.visible = true;
					detailDialog.id = "";
					break;
				case "mod":
					detailDialog.version = row.version;
					detailDialog.id = row.id;
					detailDialog.detail = JSON.stringify(row.license);
					detailDialog.title = "编辑版本";
					detailDialog.visible = true;
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "version", label: "版本", search: { el: "input" } },
			{ prop: "license", label: "授权信息", width: 100 },
			{ prop: "operate", label: "操作", width: 160 }
		];
		const saveConfig = () => {
			if (!detailDialog.version) {
				showMsg("请输入版本", MessageType.warning);
				return;
			}

			let api = detailDialog.id ? licenseVersionModify : licenseVersionAdd;
			api({ id: detailDialog.id, version: detailDialog.version, license: JSON.parse(detailDialog.detail) }).then(res => {
				let ok = showTips(res.code, detailDialog.title, res.message);
				if (ok) {
					detailDialog.visible = false;
					proTable.value.getTableList();
				}
			});
		};
		return () => {
			return (
				<div class="version-page">
					{detailDialog.visible ? (
						<DialogBox
							hideFooter={detailDialog.title == "授权信息"}
							v-model:visible={detailDialog.visible}
							width="900"
							title={detailDialog.title}
							onConfirm={saveConfig}
						>
							{detailDialog.title != "授权信息" ? (
								<el-form-item label="版本">
									<el-input v-model={detailDialog.version} placeholder="请输入版本" />
								</el-form-item>
							) : (
								""
							)}
							<JsonEditerVue v-model:data={detailDialog.detail} class="flex-1" style="height:600px;width:100%" />
						</DialogBox>
					) : (
						""
					)}
					<ProTable
						ref={proTable}
						title={btnList.value.length ? "" : "授权机器"}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						searchCol={4}
						dataCallback={dataCallback}
					>
						{{
							tableHeader: (scope: any) => {
								return btnList.value
									?.filter((item: any) => item.path != "del" && item.path != "mod")
									?.map((item: any) => {
										return (
											<el-button onClick={() => clickBtn(item.path, scope.row)} type={item.btnClass}>
												<i class={`iconfont ${item.icon}`}></i>
												{item.menuName}
											</el-button>
										);
									});
							},
							status: (scope: any) => {
								return licenseStatusType.filter((item: any) => item.value == scope.row.status)[0].label;
							},
							license: (scope: any) => {
								return (
									<el-link
										type="primary"
										link
										onClick={() => {
											clickBtn("detail", scope.row);
										}}
									>
										查看
									</el-link>
								);
							},
							operate: (scope: any) => {
								return (
									<>
										{btnList.value.map((item: any) => {
											return item.path == "del" ? (
												<el-link type="danger" link class="iconfont icontrash-2" onClick={() => clickBtn(item.path, scope.row)}>
													删除
												</el-link>
											) : (
												""
											);
										})}
										{btnList.value.map((item: any) => {
											return item.path == "mod" ? (
												<el-link type="primary" link class="iconfont iconbx-file" onClick={() => clickBtn(item.path, scope.row)}>
													编辑
												</el-link>
											) : (
												""
											);
										})}
									</>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
